<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>登录页面</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <style>
        .right-panel {
            margin-top: 20vh;
        }

        .layui-container {
            width: 100%;
            height: 100%;
            background-image: url("img/bg.png");
            background-size: 100% 100%;

        }

        .right_content {
            padding: 100px;
            height: 100%;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

<div class="layui-container">
    <div class="layui-row">
        <!-- 左侧 -->
        <div class=" layui-col-md8">
            <div class="grid-demo grid-demo-bg1" style="visibility: hidden">
                <!--                左侧-->
                left
            </div>
        </div>
        <!-- 左侧 -->
        <!-- 右侧 -->
        <div class="layui-col-xs12 layui-col-md4 right_content">

            <div class="layui-panel right-panel">
                <div style="padding: 32px;">
                    <!-- 表单 -->
                    <form action="/login" class="layui-form" enctype="application/x-www-form-urlencoded" id="form"
                          method="post">
                        <div class="demo-login-container">
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-affix="clear"
                                           lay-reqtext="请填写用户名"
                                           lay-verify="required"
                                           name="username" placeholder="用户名" type="text"
                                           value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-affix="eye"
                                           lay-reqtext="请填写密码"
                                           lay-verify="required"
                                           name="password" placeholder="密   码" type="password"
                                           value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <input id="remember_input" lay-skin="primary" name="remember" title="记住密码"
                                       type="checkbox" value="true">
                                <a href="javascript:void(0)" id="forgotPasswordUrl"
                                   style="float: right; margin-top: 7px;">忘记密码？</a>
                            </div>

                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-fluid" lay-filter="demo-login" lay-submit>登录
                                </button>
                            </div>

                        </div>
                    </form>
                    <!-- 表单 -->
                </div>
            </div>

        </div>
        <!-- 右侧 -->
    </div>
</div>

<!-- body 末尾处引入 layui -->
<script src="layui/jquery-3.7.0.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    $(function () {

        $.getJSON("/.well-known/security/meta", function (result, status, xhr) {
            if (result.code != 200) {
                layer.msg(result.msg);
            } else {
                $("#form").attr("action", result.data.formActionUrl);
                $("#remember_input").attr("name", result.data.rememberMeParameter);
                if (typeof result.data.forgotPasswordUrl != "undefined" && result.data.forgotPasswordUrl != null &&
                    result.data.forgotPasswordUrl.length != 0) {
                    $("#forgotPasswordUrl").attr("href", result.data.forgotPasswordUrl);
                }
            }
        });

    });
</script>
</body>

</html>